<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>患者-信息收集</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">

    <link href="${ctx}/static/ssi-uploader/styles/ssi-uploader.css" rel="stylesheet" />
    <script src="${ctx}/static/ssi-uploader/js/ssi-uploader.js"></script>
</head>
<body>
    <form id="patientForm" role="form" class="form-horizontal" style="margin-top:20px;" method="post" action="${pageContext.request.contextPath}/patient/addPatient">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">患者姓名:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="name" id="name" placeholder="请输入患者姓名" />
            </div>
        </div>
        <div class="form-group">
            <label for="sex" class="col-sm-2 control-label">姓别:</label>
            <div class="col-sm-8">
                <label class="radio-inline">
                    <input type="radio" id="sex" name="sex" id="optionsRadios3" value="男" checked> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" id="sex" name="sex" id="optionsRadios4"  value="女"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="nation" class="col-sm-2 control-label">民族:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="nation" id="nation" placeholder="请输入民族" />
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">年龄:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="age" id="age" placeholder="请输入年龄" />
            </div>
        </div>
        <div class="form-group">
            <label for="identityCard" class="col-sm-2 control-label">身份证号:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="identityCard" id="identityCard" placeholder="请输入身份证号" />
            </div>
        </div>
        <div class="form-group">
            <label for="mobile" class="col-sm-2 control-label">手机号:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="mobile" id="mobile" placeholder="请输入手机号" />
            </div>
        </div>
        <div class="form-group">
            <label for="qq" class="col-sm-2 control-label">QQ:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="qq" id="qq" placeholder="请输入QQ" />
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">Email:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="email" id="email" placeholder="请输入Email" />
            </div>
        </div>
        <div class="form-group">
            <label for="wechat" class="col-sm-2 control-label">微信:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="wechat" id="wechat" placeholder="请输入微信号" />
            </div>
        </div>
        <div class="form-group">
            <label for="idCardPhoto" class="col-sm-2 control-label">身份证照片:</label>
            <div class="col-sm-8">
                <input type="file" multiple id="idCardPhotoFile" name="idCardPhotoFile"/>
                <input id="idCardPhoto" name="idCardPhoto" hidden/>
            </div>
        </div>
        <div class="form-group">
            <label for="patientDesc" class="col-sm-2 control-label">病情详述:</label>
            <div class="col-sm-8">
                <textarea id="patientDesc" name="patientDesc" class="form-control" cols="30" rows="10"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="helpApplication" class="col-sm-2 control-label">救助申请书:</label>
            <div class="col-sm-8">
                <%--<input id="helpApplicationFile" type="file" class="file" data-show-upload="false"--%>
                       <%--data-show-caption="true" data-show-preview="false" data-show-remove="false"--%>
                       <%--data-allowed-file-extensions='["jpg","png","bmp"]'>--%>
                <%--<input id="helpApplication" name="helpApplication" hidden/>--%>
                    <input type="file" multiple id="helpApplicationFile" name="helpApplicationFile"/>
                    <input id="helpApplication" name="helpApplication" hidden/>
            </div>
        </div>
        <div class="form-group">
            <label for="xPhoto" class="col-sm-2 control-label">X光照片:</label>
            <div class="col-sm-8">
                <input type="file" multiple id="xPhotoFile" name="xPhotoFile"/>
                <input id="xPhoto" name="xPhoto" hidden/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-8" >
                <center>
                    <input id="patient" type="submit" class="btn btn-primary" value="提交" />
                </center>
            </div>
        </div>
    </form>

    <script>
        $(function () {
            ssiUpload("idCardPhotoFile","idCardPhoto");
            ssiUpload("helpApplicationFile","helpApplication");
            ssiUpload("xPhotoFile","xPhoto");
        });

        function ssiUpload(idFile, imgFile) {
            $('#'+idFile).ssi_uploader({
                url: '/upload/ajax/upload_file',
                locale: "zh_CN",
                allowed: ['png', 'jpg', 'pdf', 'jpeg', 'gif', 'bmp', 'JPEG', 'BMP', 'JPG', 'PNG'],
                onEachUpload: function (fileInfo) {
                    var fileValue = $('#'+imgFile).val();
                    $('#'+imgFile).val(fileValue + fileInfo.responseMsg.data+";");
                    console.log($('#'+imgFile).val());
                },
                errorHandler: {
                    method: function (msg, type) {
                        alert(msg);
                    },
                    success: 'success',
                    error: 'error'
                },
                maxFileSize: 10
            });
        }

        $('#patientForm').bootstrapValidator({
            message : '此值无效!',
            feedbackIcons : {
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                name : {
                    validators : {
                        notEmpty : {
                            message : '姓名值不能为空！'
                        },
                        stringLength: {
                            min: 2,
                            message: '用户名长度必须大于2！'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                            message: '用户名不能有数字和字符！'
                        }
                    },
                },
                identityCard : {
                    validators : {
                        notEmpty : {
                            message : '身份证号码不能为空！'
                        },
                        regexp: {
                            regexp: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                            message: '身份证号码格式不正确，为15位和18位身份证号码！'
                        },
                        callback: {/*自定义，可以在这里与其他输入项联动校验*/
                            message: '身份证号码无效！',
                            callback:function(value, validator,$field){
                                //15位和18位身份证号码的正则表达式
                                var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
                                //如果通过该验证，说明身份证格式正确，但准确性还需计算
                                var idCard = value;
                                if (regIdCard.test(idCard)) {
                                    if (idCard.length == 18) {
                                        var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
                                        var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                                        var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                                        for (var i = 0; i < 17; i++) {
                                            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
                                        }
                                        var idCardMod = idCardWiSum % 11;//计算出校验码所在数组的位置
                                        var idCardLast = idCard.substring(17);//得到最后一位身份证号码
                                        //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                                        if (idCardMod == 2) {
                                            if (idCardLast == "X" || idCardLast == "x") {
                                                return true;
                                                //alert("恭喜通过验证啦！");
                                            } else {
                                                return false;
                                                //alert("身份证号码错误！");
                                            }
                                        } else {
                                            //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                                            if (idCardLast == idCardY[idCardMod]) {
                                                //alert("恭喜通过验证啦！");
                                                return true;
                                            } else {
                                                return false;
                                                //alert("身份证号码错误！");
                                            }
                                        }
                                    }
                                } else {
                                    //alert("身份证格式不正确!");
                                    return false;
                                }
                            }
                        }
                    }
                },
                age : {
                    validators : {
                        notEmpty : {
                            message : '年龄不能为空！'
                        },
                        stringLength: {
                            min: 1,
                            max: 3,
                            message: '年龄太大了！'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '年龄只能为数字！'
                        }
                    }
                },
                mobile : {
                    validators : {
                        notEmpty : {
                            message : '手机号码不能为空！'
                        },
                        regexp: {
                            regexp: /^1[34578]\d{9}$/,
                            message: '请输入完整手机号码！'
                        }
                    }
                },
                email : {
                    validators : {
                        notEmpty : {
                            message : '邮箱不能为空！'
                        },
                        regexp: {
                            regexp: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
                            message: '请输入完整邮箱！'
                        }
                    }
                },
            }
        });
        var bootstrapValidator = $("#patientForm").data('bootstrapValidator');
        //确认
        $("#patientForm").submit(function(ev){ev.preventDefault();});

        <%--function submitPatient() {--%>
            <%--bootstrapValidator.validate();--%>
            <%--if (bootstrapValidator.isValid()) {--%>
                <%--var patientForm = $("#patientForm");--%>
                <%--console.log(patientForm.attr("action"))--%>
                <%--patientForm.attr("action","");--%>
                <%--console.log(patientForm.attr("action"))--%>
                <%--patientForm.attr('action',"${pageContext.request.contextPath}/patient/addPatient").submit();--%>
            <%--}--%>
        <%--}--%>
        $('#patient').click(function() {
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                var postData = $("#patientForm").serialize();
                $.ajax({
                    url: "${pageContext.request.contextPath}/patient/addPatient",
                    //同步方式
                    async: false,
                    data: postData,
                    type: "POST",
                    //指定请求成功后执行的回调函数
                    success: function(data){
                        var path = '${pageContext.request.contextPath}/success';
                        window.location.href = path;
                    },
                    error: function(){
                        alert("error");
                    }
                });
            } else {
                return;
            }
        });
    </script>
</body>
</html>